/* ============================================================
   OdpisKRS.pl - strona główna (układ specyficzny)
   Tokeny, gov-strip, header, stopka, .btn/.badge, .rv/.stagger
   pochodzą z app.css. Tu wyłącznie sekcje strony głównej:
   hero + wyszukiwarka + autocomplete, mapa, pasek zaufania,
   kroki, „co zawiera", porównanie, FAQ.
   ============================================================ */

/* ============================================================
   HERO - wyszukiwarka jest bohaterem
   ============================================================ */
.hero{
  position:relative; z-index:5;
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper-3) 100%);
  border-bottom:1px solid var(--line);
}
/* siatka tła nie może wyjść poza hero, ale dropdown autocomplete - tak (stąd brak overflow:hidden na .hero) */
.hero::before{ overflow:hidden; }
/* delikatna pionowa siatka tła - wrażenie kartoteki */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size:calc(100% / 12) 100%;
  opacity:.5;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.hero-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.32fr .68fr;
  gap:0; align-items:stretch;
}
.hero-main{
  padding:3.6rem 3.2rem 3.4rem 0;
  display:flex; flex-direction:column; justify-content:center;
}
.hero-eyebrow{ display:flex; align-items:center; gap:.7rem; margin-bottom:1.4rem; }
.hero-eyebrow .rule{ width:24px; height:2px; background:var(--red); flex:none; }
.hero-eyebrow span{ font-family:var(--font-mono); font-size:.7rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.hero h1{
  font-family:var(--font-sans); font-weight:700;
  font-size:clamp(2.1rem, 3.9vw, 3.3rem); line-height:1.06;
  letter-spacing:-.022em; margin-bottom:1.1rem; text-wrap:balance; color:var(--ink);
}
.hero h1 em{ font-style:normal; font-weight:700; color:var(--red); }
.hero-lead{ color:var(--ink-2); font-size:1.04rem; line-height:1.55; max-width:50ch; margin-bottom:2.3rem; }
.hero-lead strong{ color:var(--ink); font-weight:600; }

/* wyszukiwarka - bohater */
.search-form{ position:relative; max-width:none; }
.search-label{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  font-family:var(--font-mono); font-size:.68rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:.65rem; border-bottom:1px solid var(--line); padding-bottom:.55rem;
}
.search-label .sl-hint{ color:var(--ink-3); letter-spacing:.08em; }
.search-box{
  display:flex; align-items:stretch; background:var(--paper);
  border:1.5px solid var(--ink); transition:box-shadow .3s ease;
}
.search-box:focus-within{ box-shadow:0 0 0 3px var(--red-wash), 0 20px 44px -28px rgba(23,23,27,.55); }
.search-input-wrap{ position:relative; flex:1; display:flex; }
.search-icon{ flex:none; display:grid; place-items:center; width:3rem; color:var(--ink-3); }
.search-icon svg{ width:18px; height:18px; }
.search-box input{
  flex:1; width:100%; min-width:0; background:transparent; border:0;
  padding:1.25rem 3rem 1.25rem 0;
  font-family:var(--font-mono); font-size:1.02rem; font-weight:500; letter-spacing:.005em; color:var(--ink);
}
.search-box input::placeholder{ color:var(--ink-3); font-weight:400; }
.search-box input:focus{ outline:none; }
.kbd-hint{
  position:absolute; right:1rem; top:50%; transform:translateY(-50%);
  pointer-events:none; display:flex; align-items:center; gap:.4rem;
  color:var(--ink-3); font-size:.7rem; font-family:var(--font-mono); transition:opacity .2s ease;
}
.search-box:focus-within .kbd-hint{ opacity:0; }
kbd{
  font-family:var(--font-mono); font-size:.68rem;
  border:1px solid var(--line-3); border-bottom-width:2px;
  padding:.08rem .42rem; color:var(--ink-2); background:var(--paper-2);
}
.search-btn{
  flex:none; background:var(--red); color:#fff; border:0; cursor:pointer;
  font-family:var(--font-mono); font-weight:500; font-size:.84rem; letter-spacing:.04em; text-transform:uppercase;
  padding:0 1.7rem; display:flex; align-items:center; gap:.6rem; transition:background-color .25s ease;
}
.search-btn .arr{ font-family:var(--font-mono); transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.search-btn:hover{ background:var(--red-dk); }
.search-btn:hover .arr{ transform:translateX(4px); }

/* chipy - typy zapytań */
.search-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:1rem; }
.search-chips .chips-lbl{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin-right:.2rem;
}
.chip{
  font-family:var(--font-mono); font-size:.74rem; font-weight:500; letter-spacing:.04em;
  color:var(--ink-2); border:1px solid var(--line-3); background:var(--paper);
  padding:.32rem .7rem; cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background-color .2s ease;
}
.chip:hover{ border-color:var(--red); color:var(--red); background:var(--red-wash); }

/* wiersz meta - liczby z bazy */
.search-meta{
  margin-top:1.3rem; padding-top:1rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.4rem 2rem;
  font-family:var(--font-mono); font-size:.72rem; color:var(--ink-3); letter-spacing:.02em;
}
.search-meta .sm-item{ display:flex; align-items:baseline; gap:.5rem; }
.search-meta b{ color:var(--ink); font-weight:600; }

/* autocomplete */
.search-anchor{ position:relative; }
.ac-list{
  position:absolute; left:0; right:0; top:100%; z-index:300;
  margin-top:-1.5px; background:var(--paper); border:1.5px solid var(--ink);
  display:none; box-shadow:0 28px 60px -30px rgba(23,23,27,.5);
  max-height:min(60vh,420px); overflow-y:auto;
}
.ac-list.open{ display:block; }
.ac-head{
  font-family:var(--font-mono); font-size:.62rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  padding:.65rem 1.15rem .5rem; border-bottom:1px solid var(--line-2); background:var(--paper-2);
}
.ac-opt{
  display:flex; align-items:baseline; gap:1rem;
  padding:.78rem 1.15rem; cursor:pointer; text-decoration:none;
  border-bottom:1px solid var(--line-2); transition:background-color .15s ease;
}
.ac-opt:last-child{ border-bottom:0; }
.ac-opt .ac-name{ font-family:var(--font-sans); font-weight:600; font-size:.92rem; color:var(--ink); flex:1; min-width:0; }
.ac-opt .ac-krs{ font-family:var(--font-mono); font-size:.74rem; font-weight:500; color:var(--red); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ac-opt .ac-city{ font-family:var(--font-mono); font-size:.74rem; color:var(--ink-3); white-space:nowrap; }
.ac-opt:hover, .ac-opt.active{ background:var(--red-wash); }
.ac-opt.active{ box-shadow:inset 3px 0 0 var(--red); }
.ac-opt mark{ background:transparent; color:var(--red); font-weight:700; }

/* mapa - rola wspierająca, zwarty kadr po prawej */
.hero-figure{
  position:relative; border-left:1px solid var(--line);
  padding:3.6rem 0 3.4rem 3.2rem;
  display:flex; flex-direction:column; justify-content:center;
}
.figure-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:.6rem; margin-bottom:.9rem; border-bottom:1px solid var(--line-3);
}
.figure-head .fh-title{ font-family:var(--font-mono); font-size:.66rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2); }
.figure-head .fh-live{ display:flex; align-items:center; gap:.42rem; font-family:var(--font-mono); font-size:.64rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--red); }
.figure-head .fh-live::before{ content:""; width:6px; height:6px; background:var(--red); border-radius:50% !important; animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }
.hero-map{ position:relative; aspect-ratio:1/1.08; width:100%; max-height:420px; }
.hero-map canvas{ width:100%; height:100%; }
.figure-caption{
  margin-top:.85rem; padding-top:.7rem; border-top:1px solid var(--line-2);
  font-family:var(--font-mono); font-size:.66rem; line-height:1.5; letter-spacing:.02em; color:var(--ink-3);
}

/* ============================================================
   PASEK ZAUFANIA - zwarty wiersz metryk
   ============================================================ */
.trust{ border-bottom:1px solid var(--line); background:var(--paper-2); }
.trust-inner{ display:grid; grid-template-columns:repeat(4,1fr); }
.trust-cell{ padding:1.9rem 1.8rem; border-left:1px solid var(--line); }
.trust-cell:first-child{ border-left:0; padding-left:0; }
.trust-cell:last-child{ padding-right:0; }
.trust-tag{
  font-family:var(--font-mono); font-size:.64rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.85rem;
}
.trust-num{
  font-family:var(--font-mono); font-weight:600;
  font-size:clamp(1.7rem, 2.6vw, 2.25rem); line-height:1;
  letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums;
}
.trust-num .unit{ color:var(--red); }
.trust-label{ margin-top:.7rem; font-size:.82rem; line-height:1.42; color:var(--ink-2); max-width:26ch; }

/* ============================================================
   SEKCJA
   ============================================================ */
.section{ padding:5rem 0; }
.section-head{ margin-bottom:2.8rem; max-width:64ch; }
.section h2{
  font-family:var(--font-sans); font-weight:700;
  font-size:clamp(1.6rem, 2.9vw, 2.3rem); line-height:1.12;
  letter-spacing:-.02em; color:var(--ink); text-wrap:balance; margin-bottom:.6rem;
}
.section-lead{ color:var(--ink-2); font-size:1.02rem; max-width:62ch; }

/* ---------- kroki - ponumerowane wiersze ---------- */
.steps{ border-top:1px solid var(--line-3); }
.step{
  display:grid; grid-template-columns:6rem 1fr auto; gap:2rem; align-items:start;
  padding:1.5rem 1.4rem; margin:0 -1.4rem; border-bottom:1px solid var(--line);
  transition:background-color .25s ease;
}
.step:hover{ background:var(--paper-2); }
.step:hover .step-body h3{ color:var(--red); }
.step-no{ font-family:var(--font-mono); font-size:.74rem; font-weight:500; letter-spacing:.12em; color:var(--red); padding-left:.2rem; padding-top:.2rem; }
.step-body h3{ font-family:var(--font-sans); font-weight:600; font-size:1.22rem; letter-spacing:-.012em; margin-bottom:.35rem; }
.step-body p{ font-size:.94rem; color:var(--ink-2); max-width:60ch; }
.step-body p b{ color:var(--ink); }
.step-glyph{ flex:none; }
.step-glyph svg{ width:32px; height:32px; }

/* ---------- co zawiera odpis - kartoteka, wiersze danych ---------- */
.contains{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
/* siatka 2 kolumny x 3 wiersze - zwarta, zajmuje mniej miejsca */
.dzialy{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.dzial{
  display:block; background:var(--paper); padding:1.4rem 1.6rem;
  position:relative; transition:background-color .25s ease;
}
.dzial:hover{ background:var(--paper-3); }
.dzial:hover .dz-title{ color:var(--red); }
.dzial-tag{ font-family:var(--font-mono); font-size:.7rem; font-weight:500; letter-spacing:.06em; color:var(--red); }
.dzial-tag .dz-title{ display:block; font-family:var(--font-sans); font-weight:600; font-size:1.02rem; letter-spacing:-.01em; color:var(--ink); margin-top:.3rem; text-transform:none; }
.dzial p{ font-size:.88rem; color:var(--ink-2); margin-top:.55rem; line-height:1.5; }

/* ---------- porównanie ---------- */
.compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.compare-card{ border:1px solid var(--line-3); background:var(--paper); display:flex; flex-direction:column; transition:border-color .3s ease, box-shadow .3s ease; }
.compare-card:hover{ border-color:var(--ink); box-shadow:0 24px 50px -34px rgba(23,23,27,.4); }
.compare-head{ padding:1.5rem 1.8rem 1.4rem; border-bottom:1px solid var(--line); position:relative; }
.compare-head::before{ content:""; position:absolute; left:0; top:0; right:0; height:3px; }
.compare-card.aktualny .compare-head::before{ background:var(--ink); }
.compare-card.pelny .compare-head::before{ background:var(--red); }
.compare-type{ font-family:var(--font-mono); font-size:.64rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.compare-head h3{ font-family:var(--font-sans); font-weight:700; font-size:1.5rem; letter-spacing:-.018em; margin-top:.35rem; }
.compare-card.pelny .compare-head h3{ color:var(--red); }
.compare-sub{ font-size:.9rem; color:var(--ink-2); margin-top:.4rem; }
.compare-list{ list-style:none; padding:1.4rem 1.8rem; flex:1; }
.compare-list li{ font-size:.91rem; color:var(--ink-2); padding:.55rem 0 .55rem 1.5rem; position:relative; border-bottom:1px solid var(--line-2); }
.compare-list li:last-child{ border-bottom:0; }
.compare-list li::before{ content:""; position:absolute; left:0; top:1.05rem; width:6px; height:6px; background:var(--red); }
.compare-list li b{ color:var(--ink); }
.compare-foot{ padding:1.1rem 1.8rem 1.3rem; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:.74rem; color:var(--ink-3); display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.compare-foot .price{ color:var(--red); font-weight:600; font-size:1rem; font-variant-numeric:tabular-nums; }

/* ---------- FAQ ---------- */
.faq-list{ max-width:880px; border-top:1px solid var(--line-3); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:1.2rem; padding:1.35rem 0; font-family:var(--font-sans); font-weight:600; font-size:1.1rem; letter-spacing:-.012em; color:var(--ink); transition:color .2s ease; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--red); }
.faq-no{ flex:none; font-family:var(--font-mono); font-size:.74rem; font-weight:500; color:var(--ink-3); padding-top:.15rem; }
.faq-q{ flex:1; }
.faq-marker{ flex:none; width:24px; height:24px; position:relative; }
.faq-marker::before, .faq-marker::after{ content:""; position:absolute; background:var(--red); transition:transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
.faq-marker::before{ left:0; right:0; top:50%; height:1.5px; transform:translateY(-50%); }
.faq-marker::after{ top:0; bottom:0; left:50%; width:1.5px; transform:translateX(-50%); }
.faq-item[open] .faq-marker::after{ transform:translateX(-50%) scaleY(0); opacity:0; }
.faq-body{ padding:0 0 1.45rem 3.1rem; color:var(--ink-2); font-size:.96rem; max-width:74ch; }
.faq-body a{ color:var(--red); text-underline-offset:3px; }
.faq-body b{ color:var(--ink); }
.faq-ref{ display:inline-block; margin-top:.7rem; font-family:var(--font-mono); font-size:.72rem; color:var(--ink-3); border-left:2px solid var(--red); padding-left:.7rem; }

/* ============================================================
   RESPONSYWNOŚĆ (układ strony głównej)
   ============================================================ */
@media (max-width:900px){
  .hero::before{ display:none; }
  .hero-inner{ grid-template-columns:1fr; }
  .hero-main{ padding:3rem 0 2.4rem; }
  .hero-figure{ border-left:0; border-top:1px solid var(--line); padding:2.4rem 0 3rem; }
  .hero-map{ max-width:440px; margin:0 auto; aspect-ratio:1/1; }
  .figure-head, .figure-caption{ max-width:440px; margin-left:auto; margin-right:auto; }
  .trust-inner{ grid-template-columns:1fr 1fr; }
  .trust-cell{ border-left:0; padding:1.6rem 0; border-top:1px solid var(--line); }
  .trust-cell:nth-child(-n+2){ border-top:0; }
  .trust-cell:nth-child(even){ border-left:1px solid var(--line); padding-left:1.8rem; }
  .compare-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .section{ padding:3.4rem 0; }
  .search-box{ flex-direction:column; }
  .search-icon{ display:none; }
  .search-box input{ padding:1.1rem 3rem 1.1rem 1.1rem; }
  .search-btn{ padding:1rem; justify-content:center; }
  .kbd-hint{ display:none; }
  .search-meta{ flex-direction:column; gap:.4rem; }
  .step{ grid-template-columns:1fr; gap:.7rem; padding:1.3rem .9rem; margin:0; }
  .step-glyph{ display:none; }
  .dzialy{ grid-template-columns:1fr; }
  .trust-inner{ grid-template-columns:1fr; }
  .trust-cell:nth-child(even){ border-left:0; padding-left:0; }
  .trust-cell:nth-child(n+2){ border-top:1px solid var(--line); }
  .faq-body{ padding-left:0; }
  .faq-no{ display:none; }
}